<template>
  <div>
    <div ref="container" style="width: 800px; height: 800px"></div>
  </div>
</template>

<script>
import zrender from "/node_modules/zrender/dist/zrender.js";
export default {
  mounted() {
    console.log((window.zrender = zrender));
    // let zrender = zrender || zrender__WEBPACK_IMPORTED_MODULE_0__;
    const zrder = zrender.init(this.$refs["container"]);

    //绘制矩形
    //实例化矩形对象
    const rect = new zrender.Rect({
      shape: {
        x: 0,
        y: 0,
        height: 50,
        width: 50,
      },
      style: {
        fill: "yellow",
        lineWidth: 2,
      },
    });
    //添加矩形对象到zrder上面
    zrder.add(rect);

    //绘制线段
    const line = new zrender.Polyline({
      shape: {
        points: [
          [80, 80],
          [190, 120],
          [300, 200],
        ],
      },
      style: {
        stroke: "red",
        lineWidth: 2,
      },
    });
    zrder.add(line);

    //更改属性，先创建一个矩形
    const rect2 = new zrender.Rect({
      shape: {
        x: 60,
        y: 100,
        height: 50,
        width: 50,
      },
      style: {
        fill: "blue",
        lineWidth: 2,
      },
    });
    zrder.add(rect2);
    //修改颜色从蓝色变为绿色
    rect2.attr("style", {
      fill: "green",
    });

    //绘制圆形
    var circle = new zrender.Circle({
      shape: {
        cx: 150,
        cy: 50,
        r: 40,
      },
      style: {
        fill: "none",
        stroke: "#F00",
      },
    });
    zrder.add(circle);

    //绘制心
    var heart = new zrender.Heart({
      shape: {
        cx: 350,
        cy: 200,
        width: 40,
        height: 50,
      },
      style: {
        fill: "red",
        stroke: "#F00",
      },
    });
    zrder.add(heart);

    //绘制水滴
    var droplet = new zrender.Droplet({
      shape: {
        cx: 150,
        cy: 250,
        width: 10,
        height: 30,
      },
      style: {
        fill: "none",
        stroke: "brown",
      },
    });
    zrder.add(droplet);
  },
};
</script>